<template>
  <div class="home_box">
    <el-container>
      <el-header>
        <div class="home_header">
          <div class="home_logo"></div>
          <div>
            <!-- {{ username.username}} -->
            <el-button type="success" class="btn_home" @click="loginOut">退出登录</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 左侧导航栏 -->
          <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-menu-item index="2" @click="menuclick('首页')">
        <i class="el-icon-menu"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },
  mounted() {
    this.username = JSON.parse(sessionStorage.getItem("loginInfo"));
    // console.log(sessionStorage.getItem("loginInfo"))
  },
  methods: {
    loginOut() {
      this.$confirm("您是否退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("loginInfo");
          this.$router.push("/");
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    handleOpen(item){
      console.log(item,"这是点击此单栏后的方法")
    },
    menuclick(item){
      console.log(item)
      this.$router.push("/homesy")
    },
    handleClose(){

    }
  },
};
</script>

<style scoped>
.home_box {
  width: 100%;
  height: 100%;
}
.btn_home {
  width: 100px;
  height: 40px;
  margin-left: 20px;
}
::v-deep .el-container {
  width: 100%;
  height: 100%;
}
.home_header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.home_logo {
  width: 67px;
  height: 90%;
  background: url("@/assets/logo.png") no-repeat;
  background-size: 100% 100%;
}
.el-header,
.el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
  border-bottom: 1px solid rgb(217, 217, 217);

}

.el-aside {
  color: #333;
  line-height: 200px;
}

.el-main {
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>